<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-row type="flex" justify="start" align="middle" :gutter="15">
        <el-col :span="15">
          <el-row type="flex" justify="start" align="center" gutter="15">
            <el-col :span="15">

              <div class="left">
                <img src="@/assets/images/shibie.jpg" width="900" height="100%"/>
<!--                <img src="@/assets/images/profile.jpg" width="900" height="100%"/>-->
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row gutter="8">
            <div class="right">
              <el-form-item size="large">
                <h1>预警详情</h1>
              </el-form-item>
              <el-form-item label="时间" prop="field101">
                <el-input v-model="formData.time" placeholder="请输入单行文本" clearable
                          :style="{width: '100%'}">
                </el-input>
              </el-form-item>
              <el-form-item label="区域" prop="field101">
                <el-input v-model="formData.area" placeholder="请输入单行文本" clearable
                          :style="{width: '100%'}">
                </el-input>
              </el-form-item>
              <el-form-item label="类型" prop="field101">
                <el-input v-model="formData.stype" placeholder="请输入单行文本" clearable
                          :style="{width: '100%'}">
                </el-input>
              </el-form-item>
              <el-form-item label="预警内容" prop="field101">
                <el-input v-model="formData.content" type="textarea" placeholder="请输入多行文本"
                          :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>


              </el-form-item>
              <el-form-item label="问题状态" prop="field101" size="large">
                <el-button type="primary" @click="">已下发到地方</el-button>
              </el-form-item>


            </div>
          </el-row>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>
<script>
  export default {
    components: {},
    props: [],
    data() {
      return {
        formData: {
          time: null,
          are: null,
          stype: null,
          content: null,
        },
        rules: {
          field104: [{
            required: true,
            message: '请输入多行文本',
            trigger: 'blur'
          }],
        },
      }
    },
    computed: {},
    watch: {},
    created() {
      this.formData.time = "2022-05-29 11:20";
      this.formData.area = "江苏省宿迁市宿城区项里街道";
      this.formData.stype = "漂浮物";
      this.formData.content = "铁路沿线飞起彩钢瓦，可能会导致安全事故";

    },
    mounted() {
    },
    methods: {
      submitForm() {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          // TODO 提交表单
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
    }
  }

</script>
<style rel="stylesheet/scss" lang="scss">
  .left {
    position: absolute;
    left: 10%;
    top: 10%;
    margin-top: 50px; /* 高度的一半 */
    margin-left: 0px; /* 宽度的一半 */
  }

  .right {
    position: absolute;
    right: 20%;
    top: 20%;
    width: 300px;
    margin-top: 50px; /* 高度的一半 */
    margin-right: 100px; /* 宽度的一半 */
  }

</style>
